{% load staticfiles %}
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
	<title>新闻专题列表 - 我们新闻视频网</title>
	<link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'css/animate.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    
    <script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/jquery-migrate-1.2.1.min.js' %}" type="text/javascript"></script>

</head>
<body>
<section class="headerwrap ">
    <header>
		<div  class=" header">
 				<div class="top">
				<div class="wp">
					<div class="fl"><p>服务电话：<b>33333333</b></p></div>
					<!--登录后跳转-->
         {% if request.user.is_authenticated %}
            <div class="personal">
              <dl class="user fr">
                <dd>{{ user.username }}<img class="down fr" src="{% static 'images/top_down.png' %}"/></dd>
                <dt><img width="20" height="20" src="{{ MEDIA_URL }}{{ request.user.image }}"/></dt>
              </dl>
              <div class="userdetail">
                <dl>
                  <dt><img width="80" height="80" src="{{ MEDIA_URL }}{{ request.user.image }}"/></dt>
                  <dd>
                    <h2>{{ request.user.nick_name }}</h2>
                    <p>{{ request.user.username }}</p>
                  </dd>
                </dl>
                <div class="btn">
                  <a class="personcenter fl" href="">进入个人中心</a>
                  <a class="fr" href="">退出</a>
                </div>
              </div>
            </div>
                  <a href="">
              <div class="msg-num">
                <span id="MsgNum">{{ request.user.unread_nums }}</span>
              </div>
            </a>
            {% else %}

            <a style="color:white" class="fr registerbtn" href="">注册</a>
            <a style="color:white" class="fr loginbtn" href="">登录</a>
            {% endif %}

				</div>
			</div>


            <div class="middle">
                <div class="wp">
                    <a href="{% url 'index' %}"><img class="fl" src="{% static 'images/logo.jpg' %}"/></a>
                    <div class="searchbox fr">
                        <div class="selectContainer fl">
                            <span class="selectOption" id="jsSelectOption" data-value="course">
                                公开课
                            </span>
                            <ul class="selectMenu" id="jsSelectMenu">
                                <li data-value="course">新闻专题</li>
                            </ul>
                        </div>
                        <input id="search_keywords" class="fl" type="text" value="" placeholder="请输入搜索内容"/>
                        <img class="search_btn fr" id="jsSearchBtn" src="{% static 'images/search_btn.png' %}"/>
                    </div>
                </div>
            </div>
            
            
			<nav>
				<div class="nav">
					<div class="wp">
						<ul>
							<li ><a href="{% url 'index' %}">首页</a></li>
							<li class="active">
								<a href="{% url 'news:topiclist' %}">
									新闻专题列表<img class="hot" src="{% static 'images/nav_hot.png' %}">
								</a>
							</li>

						</ul>
					</div>
				</div>
			</nav>
            
			</div>
    </header>
</section>
<!--crumbs start-->

    <section>
        <div class="wp">
            <ul  class="crumbs">
                <li><a href="index.html">首页</a>></li>
                <li>新闻专题列表</li>
            </ul>
        </div>
    </section>


    <section>
	<div class="wp">
		<div class="list" style="margin-top:0;">
			<div class="left layout">
				<div class="head">
						<ul class="tab_header">
						<li {% if sort == '' %} class="active" {% endif %}><a href="?sort=">最新 </a></li>
						<li {% if sort == 'hot' %} class="active" {% endif %}><a href="?sort=hot">最热门</a></li>
						<li {% if sort == 'user_nums' %} class="active" {% endif %}><a href="?sort=user_nums">参与人数</a></li>
					</ul>
				</div>
                <div id="inWindow">
                    <div class="tab_cont " id="content">
					<div class="group_list">
                        {% for topic in all_topics.object_list %}
                            <div class="box">
                                <a href="{% url 'news:detail' topic.id  %}">
                                    <img width="280" height="350" class="scrollLoading" src="{{ MEDIA_URL }}{{ topic.image }}"/>
                                </a>
                                <div class="des">
                                    <a href="{% url 'news:detail' topic.id %}">
                                        <h2>{{ topic.topic_name }}</h2>
                                    </a>
                                    <span class="fl">频道：<i class="key">{{ topic.get_category_display }}</i></span>
                                    <span class="fr">阅读人数：{{ topic.user_nums }}&nbsp;&nbsp;</span>
                                </div>
                                <div class="bottom">
                                    <a href="course-detail.html"><span class="fl">来自新华社</span></a>
                                    <span class="star fr  notlogin
                                        " data-favid="15">
                                        1
                                    </span>
                                </div>
                            </div>
                        {% endfor %}



					</div>
		 <div class="pageturn">
            <ul class="pagelist">
                {% if all_courses.has_previous %}
                     <li class="long"><a href="?{{ all_courses.previous_page_number.querystring }}">上一页</a></li>
                  {% endif %}

                  {% for page in all_courses.pages %}
                        {% if page %}
                            {% ifequal page all_courses.number %}
                                 <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
                            {% else %}
                                  <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                            {% endifequal %}
                        {% else %}
                            <li class="none"><a href="">...</a></li>
                        {% endif %}
                  {% endfor %}
                  {% if all_courses.has_next %}
                    <li class="long"><a href="?{{ all_courses.next_page_number.querystring }}">下一页</a></li>
                  {% endif %}

            </ul>
        </div>
				</div>
                </div>
			</div>
			<div class="right layout">
				<div class="head">热门新闻专题推荐</div>
				<div class="group_recommend">
                    {% for hot_topic in hot_topics %}
                    <dl>
						<dt>
							<a target="_blank" href="">
								<img width="240" height="220" class="scrollLoading" src="{{ MEDIA_URL }}{{ hot_topic.image }}"/>
							</a>
						</dt>
						<dd>
							<a target="_blank" href=""><h2> {{ hot_topic.topic_name }}</h2></a>
							<span class="fl">频道：<i class="key">{{ hot_topic.get_category_display }}</i></span>
						</dd>
					</dl>
                    {% endfor %}
                    

                    


				</div>
			</div>
		</div>
	</div>
</section>

<footer>
		<div class="footer">
			<div class="wp">
				<ul class="cont">
					<li class="logo"><a href=""><img src="{% static 'images/footlogo.png' %}"/></a></li>
					<li class="code"><img src="{% static 'images/code.jpg' %}"/><p class="center">扫描关注微信</p></li>
					<li class="third"><img class="fl" src="{% static 'images/tell.png' %}"/><p class="tell">33333333</p><p class="time">周一至周日 9:00-18:00</p></li>
				</ul>

			</div>
			<p class="line"></p>
			<div class="wp clear">
                <span class="fl">? 2016 www.projectsedu.com 慕学在线-在线学习交流平台 保留所有权利</span>
                <span class="fr">copyright ? 2016 ICP备案证书号：蜀ICP备xxxxx号-1</span>
			</div>
		</div>
	</footer>

<section>
    <ul class="sidebar">
        <li class="qq">
            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2023525077&site=qq&menu=yes"></a>
        </li>
        <li class="totop"></li>
    </ul>
</section>
<script src="../js/selectUi.js" type='text/javascript'></script>
<script src="../js/deco-common.js" type='text/javascript'></script>
<script type="text/javascript" src="../js/plugins/laydate/laydate.js"></script>
<script src="../js/plugins/layer/layer.js"></script>
<script src="../js/plugins/queryCity/js/public.js" type="text/javascript"></script>
<script src="../js/unslider.js" type="text/javascript"></script>
<script src="../js/plugins/jquery.scrollLoading.js"  type="text/javascript"></script>
<script src="../js/deco-common.js"  type="text/javascript"></script>

</body>
</html>
